<template>
  <page-view class="flex flex-col">
    <title-bar>订单</title-bar>
    <div class="flex-1 overflow-auto bg-gray-100">
      <my-loading :isLoading="isFirstLoading" v-if="loginUserInfo">
        <PullRefresh v-model="isLoading" @refresh="refreshData">
          <List
            finished-text="没有更多数据了"
            loading-text="正在加载数据"
            :finished="pageIndex >= pageCount"
            :loading="isLoading"
            @load="loadNextPageOrder"
          >
            <TransitionGroup
              enter-active-class="animate__animated animate__slideInUp"
            >
              <div
                class="bg-white box-border p-[5px] my-[4px]"
                v-for="item in listData"
                :key="item.id"
              >
                <ul class="text-[14px] leading-[28px]">
                  <li>
                    <span class="font-bold">订单编号：</span>{{ item.id }}
                  </li>
                  <li>
                    <span class="font-bold">订单时间：</span
                    >{{ formatDateTime(item.submit_time) }}
                  </li>
                  <li>
                    <span class="font-bold">菜品总数：</span
                    >{{ item.orderDetailList.length }}
                  </li>
                  <li>
                    <span class="font-bold">订单金额：</span>￥
                    {{ item.order_money }}
                  </li>
                  <li>
                    <span class="font-bold">订单状态：</span
                    >{{ item.order_status }}
                  </li>
                </ul>
                <Steps :active="orderStatusMap.indexOf(item.order_status)">
                  <Step>未付款</Step>
                  <Step>已付款</Step>
                  <Step>已发货</Step>
                  <Step>交易完成</Step>
                </Steps>
                <p class="text-[14px] font-bold">订单列表</p>
                <ul class="text-[12px] food-list">
                  <li
                    v-for="(o_item, o_index) in item.orderDetailList"
                    :key="item.id"
                    class="flex flex-row justify-between"
                  >
                    <span
                      >{{ o_index + 1 }}.{{ o_item.foodInfo.food_name }} x
                      {{ o_item.foodInfo.price }}</span
                    >
                    <span>{{ o_item.count }}</span>
                  </li>
                </ul>
                <div class="py-[4px] flex flex-row justify-end" v-if="item.order_status=='已发货'">
                  <Button type="primary" size="mini" plain>评价</Button>
                </div>
              </div>
            </TransitionGroup>
          </List>
        </PullRefresh>
      </my-loading>
      <p class="text-center py-[10px] text-[14px]" v-else>
        你还没有登录，请先去
        <router-link class="text-primaryColor" :to="{ name: 'Login' }"
          >登录</router-link
        >
      </p>
    </div>
  </page-view>
</template>
<script>
import API from "@/utils/API";
import { Steps, Step, Button, List, PullRefresh } from "vant";
import { formatDateTime } from "@/utils/DateTimeUtils";
import { mapGetters } from "vuex";
export default {
  name: "Order",
  data() {
    return {
      isFirstLoading: true,
      isLoading: false,
      pageIndex: 1,
      pageCount: 0,
      listData: [],
      orderStatusMap: ["未付款", "已付款", "已发货", "交易完成"],
    };
  },
  computed: {
    ...mapGetters(["loginUserInfo"]),
  },
//   created() {
//     if (this.loginUserInfo) {
//       this.getMyOrderListByPage({ pageIndex: this.pageIndex });
//     }
//   },
//这个是keep-alive以后的组件被重新激活
  activated() {
    //如果用户已经登录了，并且之前还没有请求数据，我就请求数据
    if(this.loginUserInfo&&this.isFirstLoading){
        this.getMyOrderListByPage({ pageIndex: this.pageIndex });
    }
  },
  methods: {
    formatDateTime,
    async getMyOrderListByPage({ pageIndex, isRefresh = false }) {
      this.isLoading = true;
      let result = await API.orderInfo.getMyOrderListByPage({ pageIndex });
      this.pageIndex = result.pageIndex;
      this.pageCount = result.pageCount;
      if (isRefresh) {
        //说明这里是刷新的请求数据，那么之前的数据就可以不用要了，直接替换
        this.listData = result.listData;
      } else {
        this.listData.push(...result.listData);
      }
      this.isLoading = false;
      this.isFirstLoading = false;
    },
    loadNextPageOrder() {
      this.pageIndex++;
      this.getMyOrderListByPage({ pageIndex: this.pageIndex });
    },
    //下拉刷新
    refreshData() {
      this.pageIndex = 1;
      this.getMyOrderListByPage({ pageIndex: this.pageIndex, isRefresh: true });
    },
  },
  components: {
    Steps,
    Step,
    Button,
    List,
    PullRefresh,
  },
};
</script>
<style lang="scss" scoped>
.food-list {
  > li {
    @apply border-0 border-b border-dashed border-gray-400 py-[6px];
  }
}
</style>
